<section class="record-box">
    <section class="header" i18n="ClassRecord">Class Record</section>

    <div class="body flex flex-row">
      <section class="nav-col ">
        <div class="calendar-box">
          <app-calendar [result]="result" [eventSource]="eventSource"></app-calendar>
        </div>
      </section>

      <section class="message-col" *ngIf="activedDay">

        <ng-scrollbar class="scrollbar">
          <div *ngIf="activedDay.bookedList; else loading">
            <ng-template [ngIf]="activedDay.bookedList.length > 0" [ngIfElse]="error">

              <div class="booked-wrap" *ngFor="let booked of activedDay.bookedList">

                <app-booked
                          class="app-booked"
                          [booked]="booked"
                          (onOpen)="onOpen($event)"></app-booked>
              </div>
            </ng-template>
          </div>

          <ng-template #error>
            <div style="height: 430px;" class="error"></div>
          </ng-template>

          <ng-template #loading>
            <div style="height: 430px;" class="loading"></div>
          </ng-template>

        </ng-scrollbar>



      </section>
    </div>

<!--
  <ng-template #loading>
    <div class="loading"></div>
  </ng-template>-->
</section>
